<template>
    <section class="page">
        <weShare class="defPage"></weShare>
        <div class="demo">
            <van-cell title="点击复制" is-link @click="doCopy" />
            <van-cell title="生成海报1" is-link @click="showCanvas(1)" />
            <van-cell title="生成海报2" is-link @click="showCanvas(2)" />
        </div>
        <CardCanvas :bgImg="bgImg" :params="canvasParams" @createCanvas="createCanvas"></CardCanvas>
        <van-popup class="cavans-dialog" :close-on-click-overlay="false" v-model="showDialog">
            <div class="content">
                <img :src="createPosterImg">
                <span class="close" @click="showDialog = false"><van-icon name="close" /></span>
                <span>长按保存海报到相册</span>
            </div>
        </van-popup>
    </section>
</template>

<script>
import weShare from '@/views/weShare/index.vue'
import CardCanvas from '@/components/canvas/CardCanvas.vue'
export default {
    name: 'center',
    components: { weShare, CardCanvas },
    data () {
        return {
            host: 'http://n.szbatm.com',
            location: '',
            bgImg: require('@/assets/img/canvas/bg.png'),
            canvasFlag: false,
            showDialog: false,
            createPosterImg: '',
            canvasParams: {
                qrcode: require(`@/assets/img/canvas/qrcode1.png`)
            }
        }
    },
    activated () {
    },
    created () {
    },
    methods: {
        doCopy () {
            this.$copyText('http://n.szbatm.com').then(e => {
                this.$toast('复制到粘贴板成功')
            }, () => {
                this.$toast('复制失败请长按手动复制')
            })
        },
        showCanvas (type) {
            this.canvasParams.qrcode = require(`@/assets/img/canvas/qrcode${type}.png`)
            this.$loading()
            setTimeout(() => {
                this.$loading(false)
                this.showDialog = true
            }, 800)
        },
        createCanvas (res) {
            this.createPosterImg = res
        }
    },
    watch: {
    }
}
</script>

<style lang="less" scoped>
.defPage {
    position: relative;
}
.cavans-dialog {
    width: 100%;
    background: rgba(255, 255, 255, 0);
    .content {
        padding: 15px;
        background: #4c4c4c;
        overflow: hidden;
        img {
            width: 100%;
        }
        span {
            display: block;
            text-align: center;
            color: #fff;
            padding-top: 10px;
        }
        .close {
            .van-icon-close {
                font-size: 35px;
                color: #fff;
            }
        }
    }
    /deep/ .van-dialog__content {
        text-align: center;
        padding: 30px 15px;
    }
    /deep/ .van-dialog__footer {
        padding: 10px 0;
    }
}
</style>
